<template>
	<div class="centered-container">
		<div class="login-card">
			<h2>登 录</h2>
			<div class="input-group">
				<input type="text" v-model="uid" placeholder="账号">
			</div>
			<div class="input-group">
				<input type="password" v-model="password" placeholder="密码">
			</div>
			<div class="button-container">
				<button class="login-btn" @click="login">登 录</button>
			</div>
			<!-- <div class="qq">
				使用QQ登录
				<img src="@/assets/QQ.png" alt="使用QQ登录" class="qq-image">
			</div> -->
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		postRequest
	} from '@/api/url_query'
	export default {
		data() {
			return {
				uid: '',
				password: ''
			};
		},
		methods: {
			login() {
				const data = {
					uid: this.uid
				};
				const loginUrl = '/api/login/';
				postRequest(loginUrl, data)
					.then(response => {
						console.log(response.data);
						if (response.data.status === true) {
							const uid = response.data.uid;
							localStorage.setItem('uid', uid);
							console.log(uid)
							//alert('登录成功');
							this.$router.push('/HomePage')
						} else {
							alert('登录失败');
						}
					})
					.catch(error => {
						alert('登录失败：' + error);
					});
			}
		}
	};
</script>
<style scoped>
	.login-card {
		background-color: #fff;
		padding: 20px;
		width: 300px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.login-card h2 {
		margin-bottom: 20px;
		text-align: center;
	}

	.input-group {
		margin-bottom: 15px;
	}

	.input-group input {
		width: 270px;
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.button-container {
		display: flex;
	}

	.login-btn {
		padding: 12px 0;
		background-color: rgb(52, 200, 252);
		font-size: 15px;
		color: #fff;
		border: none;
		width: 300px;
		border-radius: 8px;
	}

	.login-btn:hover {
		background-color: skyblue
	}

	/* .qq {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}

	.qq-image {
		margin-left: 5px;
		cursor: pointer;
	} */
</style>